<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%  response.addDateHeader("Expires", 0);response.setHeader("Pragma","no-cache"); response.setHeader("Cache-Control","no-cache");%>
<html>
  <head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
    <style type="text/css">
     html, body {
	  height: 100%;
	  margin: 0;
	  padding: 0;
	  }
	
	  #map_canvas {
	  height: 100%;
	  }
	
	
      #directions-panel {
        height: 100%;
        float: right;
        width: 250px;
        overflow: auto;
      }

      #map-canvas {
      	 width: 760px;
      }

      #control {
        background: #fff;
        padding: 5px;
        font-size: 14px;
        font-family: Arial;
        border: 1px solid #ccc;
        box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);
        display: none;
      }
    </style>
    <script type="text/javascript"
      src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

    <script type="text/javascript">
      var directionDisplay;
      var map;
      var directionsService = new google.maps.DirectionsService();

      function initialize() {
        directionsDisplay = new google.maps.DirectionsRenderer({
            'map': map,
            'suppressMarkers' : true,
            'preserveViewport': true
            });
        var myOptions = {
          zoom: 12,
          mapTypeId: google.maps.MapTypeId.ROADMAP,
          center: new google.maps.LatLng(28.607092,106.67681)
        };
        map = new google.maps.Map(document.getElementById('map_canvas'),
            myOptions);
        directionsDisplay.setMap(map);
        directionsDisplay.setPanel(document.getElementById('directions-panel'));

        var control = document.getElementById('control');
        control.style.display = 'block';
        map.controls[google.maps.ControlPosition.TOP].push(control);
        initMakers();
      }

      function calcRoute() {
        var start = document.getElementById('start').value;
        var end = document.getElementById('end').value;
        var request = {
          origin: start,
          destination: end,
          travelMode: google.maps.DirectionsTravelMode.DRIVING
        };
        directionsService.route(request, function(response, status) {
          if (status == google.maps.DirectionsStatus.OK) {
            directionsDisplay.setDirections(response);
          }
        });
      }

	  function initMakers(){      
		  var nonxueyuanLatlng = new google.maps.LatLng(28.538687,106.684456);
		  var huadian = new google.maps.LatLng(28.518687,106.604456);
		  var hualianLatlng = new google.maps.LatLng(28.659562,106.812859);
		  var tonghuaLatlng = new google.maps.LatLng(28.579562,106.432859);
		  var yuyangLatlng = new google.maps.LatLng(28.618884,106.556339);
		  var szLatlng = new google.maps.LatLng(28.592058,106.679935);
		  var szmdLatlng = new google.maps.LatLng(28.615569,106.677189);
		  
		  var kexuyuan = new google.maps.LatLng(28.607092,106.67681);

		  
		  var marker1 = new google.maps.Marker({
			  position: nonxueyuanLatlng, 
			  map: map, 
			  title:"石壕煤矿救护中队"
		  });   
		  var marker2 = new google.maps.Marker({
			  position: huadian, 
			  map: map, 
			  title:"梨园煤矿救护中队"
		  });   
		  var marker3 = new google.maps.Marker({
			  position: hualianLatlng, 
			  map: map, 
			  title:"逢春煤矿救护中队"
		  });   
		  var marker5 = new google.maps.Marker({
			  position: tonghuaLatlng, 
			  map: map, 
			  title:"桐华煤矿救护中队"
		  });   
		  var marker6 = new google.maps.Marker({
			  position: yuyangLatlng, 
			  map: map, 
			  title:"渝阳煤矿救护中队"
		  });   
		  var marker7 = new google.maps.Marker({
			  position: szLatlng, 
			  map: map, 
			  title:"松藻煤矿救护中队"
		  });   
		  var marker8 = new google.maps.Marker({
			  position: szmdLatlng, 
			  map: map, 
			  title:"松藻煤电公司救护中队"
		  });   
		  var marker4 = new google.maps.Marker({
			  position: kexuyuan, 
			  map: map, 
			  icon: "warn.png",
			  title:"打通一矿"
		  });   
	  }
    </script>
  </head>
  <body onload="initialize();">
    <div id="control">
      <strong>单位:</strong>
      <select id="start" onchange="calcRoute();">
        <option value="28.538687,106.684456">石壕煤矿救护中队</option>
        <option value="28.518687,106.604456">梨园煤矿救护中队 </option>
        <option value="28.659562,106.812859">逢春煤矿救护中队</option>
        <option value="28.579562,106.432859">桐华煤矿救护中队</option>
        <option value="28.618884,106.556339">渝阳煤矿救护中队</option>
        <option value="28.592058,106.679935">松藻煤矿救护中队</option>
        <option value="28.615569,106.677189">松藻煤电公司救护中队</option>
      </select>

      <strong>事故矿区:</strong>
      <select id="end" onchange="calcRoute();">
        <option value="28.607092,106.67681">打通一矿</option>
      </select>
    </div>
    <div id="directions-panel"></div>
    <div id="map_canvas"></div>
  </body>
</html>
